<template>
  <f7-page class="qm-page">
        <qm-currentcy-navbar title="获取验证码">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <!-- 输入框 -->
    <qm-field label="标题五个字" placeholder="请输入"> </qm-field>
    <h3>请输入</h3>
    <qm-field label="标题五个字" placeholder="请选择" readonly is-link v-model="acc">
    </qm-field>
    <h3>选项</h3>
    <qm-field label="上级检查" autosize choice input-align="right">
      <template #input>
        <!-- 是否选择 -->
        <f7-list class="qm-list">
          <f7-list-item
            radio
            radio-icon="start"
            title="男"
            name="demo-radio-start"
            checked
          ></f7-list-item>
          <f7-list-item
            radio
            radio-icon="start"
            title="女"
            name="demo-radio-start"
          ></f7-list-item>
        </f7-list>
      </template>
    </qm-field>
    <h3>短信验证码</h3>
    <qm-field center clearable label="验证码" placeholder="请输入短信验证码">
      <template #button>
        <f7-button v-if="Verification" @click="sendMsg">发送验证码</f7-button>
        <div v-else>
          <span>({{ num }})</span>
          <span>重新获取</span>
        </div>
      </template>
    </qm-field>
    <h3>单行列表</h3>
    <qm-field label="上级检查" autosize choice input-align="right">
      <template #input>
        <f7-stepper small class="qm-stepper"></f7-stepper>
      </template>
    </qm-field>
    <h3>设置登录密码</h3>
    <qm-field
      autosize
      choice
      input-align="left"
      placeholder="请设置登录密码"
      :type="[password ? 'password' : 'text']"
      v-model="acc"
    >
      <template #right-icon>
        <img
          src="static/img/send-verification-code/icon-bukejian.png"
          alt=""
          width="22px"
          height="22px"
          @click="password = !password"
        />
      </template>
    </qm-field>
    <h3>暗提示</h3>
    <qm-field label-align="rigth" readonly>
      <template #label>
        <div>
          <div>标题文字</div>
          <div class="antishi">暗提示</div>
        </div>
      </template>
    </qm-field>
    <h3>暗提示</h3>
    <qm-field
      label-align="rigth"
      label="标题"
      readonly
      is-link
      input-align="center"
    >
      <template #label>
        <div>
          <div>标题文字</div>
          <div class="antishi">暗提示</div>
        </div>
      </template>
    </qm-field>
    <h3>文字描述</h3>
    <qm-field
      rows="2"
      v-model="message"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <h3>转账金额</h3>
    <qm-field
      autosize
      choice
      input-align="left"
      placeholder="输入转账金额"
      class="qm-money"
      label="￥"
      size="large"
    >
      <template #label>
        <div class="money">￥</div>
      </template>
      <template #input>
        <input type="text" placeholder="输入转账金额" class="qm-input" />
      </template>
    </qm-field>
    <h3>体现金额</h3>
    <qm-field autosize choice input-align="left" class="qm-money" size="large">
      <template #label>
        <div class="money">￥</div>
      </template>
      <template #input>
        <input type="text" placeholder="输入转账金额" class="qm-input" />
      </template>
    </qm-field>
    <div class="tixian">
      <div style="color: #9ea7b7">可用余额2.90元</div>
      <a href="">全部体现</a>
    </div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      password: true,
      acc: "2",
      Verification: true,
      num:60,
    };
  },
  methods: {
    getCode() {
      this.$f7.toast.show({
        text: "验证码已发送",
        closeTimeout: 3000,
      });
    },
    sendMsg() {
      this.Verification = false;
      let timer = setInterval(() => {
        this.num--;
        if (this.num <= 0) {
          this.Verification = true;
          clearInterval(timer);
          this.num = 60;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.antishi {
  color: #b5bcca;
}
.tixian {
  display: flex;
  justify-content: space-between;
  margin: calc(24px * var(--ratio)) calc(32px * var(--ratio));
}
/deep/.van-cell--large .van-cell__title {
  font-size: 35px;
  color: #61677a;
}
/deep/ .van-field__label {
  width: auto;
}
.qm-money {
  money {
    font-size: 20px;
  }
  .qm-input {
    font-size: 20px;
    color: var(--color-text-weak);
  }
}
h3 {
  margin-left: 20px;
}

.qm-list {
  margin: 0px;
  --f7-list-item-media-margin: 0px;
  --f7-radio-extra-margin: 3px;
  --f7-list-item-padding-horizontal: 10px;
  --f7-safe-area-right: 0px;
  --f7-list-item-min-height: 0px;
  --f7-list-item-padding-vertical: 0px;
  /deep/ ul {
    display: flex;
  }
}
.qm-stepper {
  --f7-stepper-small-height: calc(44px * var(--ratio));
  --f7-stepper-small-border-width: 0px;
  /deep/ .stepper-button-minus {
    width: calc(44px * var(--ratio));
    border: 1px solid #e3e5e9;
  }
  /deep/ .stepper-button-plus {
    width: calc(44px * var(--ratio));
    border: 1px solid #e3e5e9;
  }
  /deep/ .stepper-input-wrap input {
    width: calc(64px * var(--ratio));
    color: #0f1826;
    border: 1px solid #e3e5e9;
  }
  /deep/ .stepper-button-minus:after{
    width: 10px;
  }
  /deep/ .stepper-button-plus:before{
    height: 10px;
  }
  /deep/ .stepper-button-plus:after{
    width: 10px;
  }
  /deep/ .van-field__word-limit{
    color: var(--color-text-weak);
  }
}
</style>
